<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<center>


    <!--    <a href="/myWeb/two?userName=mike&passWord=123">通过超链接请求资源别携带参数</a>-->

    <!--    <form action="/myWeb/three" method="get">-->
    <!--        请求参数：<input type="text" name="userName"/><br/>-->
    <!--        <input type="submit" value="get方式访问ThreeServlet">-->
    <!--    </form>-->

    <!--    <form action="/myWeb/three" method="Post">-->
    <!--        请求参数：<input type="text" name="userName"/><br/>-->
    <!--        <input type="submit" value="post方式访问ThreeServlet">-->
    <!--    </form>-->


    <table border="1" width="500">
        <tr>
            <td>用户名:</td>
            <td><input type="text" name="name" id="name" onblur="checkUserName()"><span id="span01"></span></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="text" name=""></td>
        </tr>
        <tr>
            <td>邮箱</td>
            <td><input type="text" name=""></td>
        </tr>
        <tr>
            <td>简介</td>
            <td><input type="text" name=""></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="注册"></td>
        </tr>
    </table>


</center>
</body>


<script type="text/javascript">

    function checkUserName() {

        //获取输入框的值 document 整个网页
        var name = document.getElementById("name").value; // value  value() val val()
        //1. 创建对象
        var request = ajaxFunction();

        //2. 发送请求
        request.open("POST"  ,"/check" , true );

        //注册状态改变监听，获取服务器传送过来的数据
        request.onreadystatechange = function(){

            if(request.readyState == 4 && request.status == 200){
                //alert(request.responseText);
                var data = request.responseText;
                if(data == 1){
                    //alert("用户名已存在");
                    document.getElementById("span01").innerHTML = "<font color='red'>用户名已存在!</font>";
                }else{
                    document.getElementById("span01").innerHTML = "<font color='green'>用户名可用!</font>";
                    //alert("用户名未存在");
                }
            }
        }

        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        request.send("name="+name);
    }






    function post() {
        //1. 创建对象
        var request = ajaxFunction();

        //2. 发送请求
        request.open("POST", "/day16/DemoServlet01", true);

        //想获取服务器传送过来的数据， 加一个状态的监听。
        request.onreadystatechange = function () {
            if (request.readyState == 4 && request.status == 200) {
                alert("post：" + request.responseText);
            }
        }

        //如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        //带数据过去， 在send方法里面写表单数据。
        request.send("name=aobama&age=19");
    }


    //执行get请求
    function get() {

        //1. 创建xmlhttprequest 对象
        var request = ajaxFunction();

        //2. 发送请求。
        // http://localhost:8080/day16/demo01.jsp
        //http://localhost:8080/day16/DemoServlet01

        /*
            参数一： 请求类型  GET or  POST
            参数二： 请求的路径
            参数三： 是否异步， true  or false
        */
        request.open("GET", "/one?age=17", true);
        //3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
        request.onreadystatechange = function () {

            //前半段表示 已经能够正常处理。  再判断状态码是否是200
            if (request.readyState == 4 && request.status == 200) {
                //弹出响应的信息
                alert(request.responseText);
            }
        }
        request.send();
    }


    function ajaxFunction() {
        var xmlHttp;
        try { // Firefox, Opera 8.0+, Safari
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            try {// Internet Explorer
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                }
            }
        }
        return xmlHttp;
    }


</script>
</html>